<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>M3U8 Video Detector - 设置</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f5f5f5;
      line-height: 1.6;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    header {
      background-color: #4285f4;
      color: white;
      padding: 20px 0;
      text-align: center;
      margin-bottom: 30px;
    }
    
    header h1 {
      margin: 0;
      font-size: 24px;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    
    h2 {
      color: #4285f4;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 10px;
      margin-top: 0;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
    }
    
    input[type="text"],
    input[type="number"],
    textarea,
    select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
    }
    
    input[type="checkbox"] {
      margin-right: 8px;
    }
    
    .checkbox-label {
      display: flex;
      align-items: center;
      font-weight: normal;
    }
    
    textarea {
      min-height: 100px;
      font-family: monospace;
    }
    
    .help-text {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
    
    .button-group {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;
    }
    
    button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .primary-btn {
      background-color: #4285f4;
      color: white;
    }
    
    .primary-btn:hover {
      background-color: #3367d6;
    }
    
    .secondary-btn {
      background-color: #f1f3f4;
      color: #5f6368;
    }
    
    .secondary-btn:hover {
      background-color: #e8eaed;
    }
    
    .danger-btn {
      background-color: #ea4335;
      color: white;
    }
    
    .danger-btn:hover {
      background-color: #d33828;
    }
    
    .note {
      background-color: #e8f0fe;
      border-left: 4px solid #4285f4;
      padding: 10px 15px;
      margin: 15px 0;
    }
    
    .warning {
      background-color: #fef7e0;
      border-left: 4px solid #fbbc04;
      padding: 10px 15px;
      margin: 15px 0;
    }
    
    .success-message {
      background-color: #e6f4ea;
      border-left: 4px solid #34a853;
      padding: 10px 15px;
      margin: 15px 0;
      display: none;
    }
    
    .error-message {
      background-color: #fce8e6;
      border-left: 4px solid #ea4335;
      padding: 10px 15px;
      margin: 15px 0;
      display: none;
    }
    
    footer {
      text-align: center;
      padding: 20px;
      color: #666;
      font-size: 14px;
      margin-top: 40px;
    }
    
    a {
      color: #4285f4;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    .hidden {
      display: none;
    }
    
    .tabs {
      display: flex;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;
    }
    
    .tab {
      padding: 10px 20px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.3s;
    }
    
    .tab.active {
      border-bottom-color: #4285f4;
      color: #4285f4;
    }
    
    .tab:hover:not(.active) {
      border-bottom-color: #ddd;
    }
    
    .tab-content {
      display: none;
    }
    
    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <h1>M3U8 Video Detector - 设置</h1>
    </div>
  </header>
  
  <div class="container">
    <div class="tabs">
      <div class="tab active" data-tab="general">通用设置</div>
      <div class="tab" data-tab="player">播放器</div>
      <div class="tab" data-tab="downloader">下载器</div>
      <div class="tab" data-tab="filters">过滤规则</div>
      <div class="tab" data-tab="storage">存储管理</div>
      <div class="tab" data-tab="about">关于</div>
    </div>
    
    <div id="success-message" class="success-message">
      设置已保存！
    </div>
    
    <div id="error-message" class="error-message">
      保存设置时出错！
    </div>
    
    <div id="general" class="tab-content active">
      <div class="card">
        <h2>通知设置</h2>
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="notifications-enabled">
            启用桌面通知
          </label>
          <p class="help-text">当检测到新的M3U8链接时显示通知</p>
        </div>
        
        <div class="form-group">
          <label for="notifications-timeout">通知显示时间（毫秒）</label>
          <input type="number" id="notifications-timeout" min="0" step="1000">
          <p class="help-text">设置为0表示不自动关闭通知</p>
        </div>
      </div>
    </div>
    
    <div id="player" class="tab-content">
      <div class="card">
        <h2>播放器设置</h2>
        <div class="form-group">
          <label for="default-player">默认播放器</label>
          <select id="default-player">
            <option value="https://m3u8play.com/?url=">M3U8Play</option>
            <option value="https://tools.thatwind.com/tool/m3u8player#">ThatWind M3U8 Player</option>
            <option value="https://www.m3u8.tv/player.html?url=">M3U8.TV</option>
          </select>
          <p class="help-text">选择用于播放M3U8链接的在线播放器</p>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="use-custom-player">
            使用自定义播放器
          </label>
        </div>
        
        <div class="form-group">
          <label for="custom-player-url">自定义播放器URL</label>
          <input type="text" id="custom-player-url" placeholder="https://example.com/player?url={url}">
          <p class="help-text">使用{url}作为M3U8链接的占位符</p>
        </div>
      </div>
    </div>
    
    <div id="downloader" class="tab-content">
      <div class="card">
        <h2>下载器设置</h2>
        <div class="form-group">
          <label for="default-downloader">默认下载器</label>
          <select id="default-downloader">
            <option value="https://tools.thatwind.com/tool/m3u8downloader#">ThatWind M3U8 Downloader</option>
            <option value="https://m3u8.dev/?url=">M3U8.dev</option>
            <option value="https://m3u8play.com/download.html?url=">M3U8Play Downloader</option>
          </select>
          <p class="help-text">选择用于下载M3U8视频的在线工具</p>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="use-custom-downloader">
            使用自定义下载器
          </label>
        </div>
        
        <div class="form-group">
          <label for="custom-downloader-url">自定义下载器URL</label>
          <input type="text" id="custom-downloader-url" placeholder="https://example.com/downloader?url={url}">
          <p class="help-text">使用{url}作为M3U8链接的占位符</p>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="auto-open-downloader">
            自动打开下载器
          </label>
          <p class="help-text">检测到新链接时自动打开下载页面</p>
        </div>
      </div>
    </div>
    
    <div id="filters" class="tab-content">
      <div class="card">
        <h2>过滤规则</h2>
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="filters-enabled">
            启用URL过滤
          </label>
          <p class="help-text">根据规则过滤检测到的M3U8链接</p>
        </div>
        
        <div class="form-group">
          <label for="filter-rules">过滤规则</label>
          <textarea id="filter-rules" placeholder=".*\.example\.com/.*&#10;!.*\.ads\.com/.*"></textarea>
          <p class="help-text">
            使用JavaScript正则表达式格式，每行一个规则。<br>
            以!开头的规则表示排除匹配的链接。<br>
            例如：<br>
            .*\.example\.com/.* - 包含example.com域名的链接<br>
            !.*\.ads\.com/.* - 排除ads.com域名的链接
          </p>
        </div>
      </div>
    </div>
    
    <div id="storage" class="tab-content"></div>
      <div class="card">
        <h2>存储设置</h2>
        <div class="form-group">
          <label class="checkbox-label"></label>
            <input type="checkbox" id="auto-clear">
            自动清理旧链接
          </label>
        </div>
        
        <div class="form-group">
          <label for="max-items">最大保存链接数量</label>
          <input type="number" id="max-items" min="0">
          <p class="help-text">设置为0表示不限制数量</p>
        </div>
        
        <div class="form-group">
          <label for="clear-after-days">自动清理天数</label>
          <input type="number" id="clear-after-days" min="1">
          <p class="help-text">超过指定天数的链接将被自动清理</p>
        </div>
      </div>
      
      <div class="card">
        <h2>导入/导出设置</h2>
        <div class="button-group">
          <button id="export-btn" class="secondary-btn">导出设置</button>
          <button id="import-btn" class="secondary-btn">导入设置</button>
          <input type="file" id="import-file" accept=".json" class="hidden">
        </div>
      </div>
      
      <div class="card">
        <h2>重置设置</h2>
        <p>将所有设置恢复为默认值。此操作不会删除已保存的链接。</p>
        <div class="button-group">
          <button id="reset-btn" class="danger-btn">重置所有设置</button>
        </div>
      </div>
    </div>
    
    <div id="about" class="tab-content">
      <div class="card">
        <h2>关于 M3U8 Video Detector</h2>
        <p>版本: 1.0.0</p>
        <p>M3U8 Video Detector是一个浏览器扩展程序，可以自动检测网页中的M3U8视频链接，并提供便捷的播放和下载选项。</p>
        
        <div class="note">
          <p>如果您在使用过程中遇到问题或有任何建议，请通过以下方式联系我们：</p>
          <p>电子邮件：support@m3u8detector.example.com</p>
          <p>GitHub：<a href="https://github.com/example/m3u8-detector" target="_blank">https://github.com/example/m3u8-detector</a></p>
        </div>
      </div>
    </div>
    
    <div class="button-group">
      <button id="save-btn" class="primary-btn">保存设置</button>
    </div>
  </div>
  
  <footer>
    <p>M3U8 Video Detector &copy; 2023 | <a href="help.html">帮助</a> | <a href="https://github.com/example/m3u8-detector" target="_blank">GitHub</a></p>
  </footer>

  <script src="options.js"></script>
</body>
</html>